<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box{
            width: 200px;
            height: 200px;
            margin: 50px auto;
            border: 5px solid red;
            transition: all .5s linear;
        }
        #box:hover{
            box-shadow: 10px 10px gray;
            width: 500px;
            height: 500px;
            border:2px solid yellow;
        }
        #small{
            width: 50px;
            height: 50px;
            background: yellow;
            transition: all .5s;
        }
        #box:hover #small{
            opacity: 0;
        }
    </style>
</head>
<body>
    <!-- 
        1. 平滑过渡
            transition:需要过渡哪个属性
                       过渡属性一共需要的时间(持续时间)
                       [过渡属性时的动画(速率)]
                       [多少时间之后再过渡(延迟时间)]
        2. 使用方式
            过渡单一属性
            transition:属性名 持续时间 速率 延迟时间;
            过渡多个属性
            transition:属性名1 持续时间 速率 延迟时间,属性名2 持续时间 速率 延迟时间,...;
            过渡所有改变的属性
            transition:all 持续时间 速率 延迟时间;
        3. 速率
            ease        默认,逐渐变慢
            linear      匀速
            ease-in     加速
            ease-out    减速
            ease-in-out 先加速再减速
            cubic-bezier() 自定义速率
        4. 延迟时间
            单位:s/ms
        5. 使用属性
            理论上:所有属性
            实际上:只有能加减的属性才能有效果.例如:width,height,颜色,透明度 等
                   如果只是单词的切换时无法过渡的. 例如:display,overflow,visibility等
     -->
    <div id="box">
        <div id="small"></div>
    </div>
</body>
</html>